import React, {Component} from 'react'
import {DropdownContext, DropdownContextType} from './DropdownContext'
import {Button} from '../button/Button'
import ButtonIcon, {IconSize} from '../icon/ButtonIcon'
import {COLORS} from '../color'
import {ButtonSize, ButtonStyle} from '../button/utils'
import {ThemeColor} from '../color/ThemeColor'

export enum DropdownToggleType {
  iconButton = 'iconButton',
  textButton = 'textButton',
}

interface DropdownToggleProps {
  type: DropdownToggleType
  className?: string
  textButton?: string
  textButtonSize?: ButtonSize
  textButtonStyle?: ButtonStyle
  iconTitle?: string
  iconColor?: string
  iconPosition?: 'right' | 'left'
  hover?: 'light'
  textButtonColor?: ThemeColor
  sizeIcon?: IconSize
  hoverIconColor?: ThemeColor
  iconPath?: string
  isHoverArea?: boolean
}

class DropdownToggle extends Component<DropdownToggleProps> {
  render(): React.ReactNode {
    const {
      className,
      textButton,
      textButtonSize,
      textButtonStyle,
      iconTitle,
      type,
      iconColor,
      iconPosition,
      hover,
      textButtonColor,
      hoverIconColor,
      sizeIcon,
      iconPath,
      isHoverArea,
    } = this.props
    switch (type) {
      case DropdownToggleType.textButton:
        return (
          <DropdownContext.Consumer>
            {(value: DropdownContextType | any) => (
              <div id={value.id} className={className ? className : ''}>
                <Button
                  iconPosition={iconPosition}
                  iconPath={iconPath}
                  color={textButtonColor ? textButtonColor : undefined}
                  disabled={value.disabled}
                  size={textButtonSize ? textButtonSize : 'sm'}
                  id={value.id}
                  style={textButtonStyle}
                  hover={hover}
                  type={'button'}>
                  {textButton}
                </Button>
              </div>
            )}
          </DropdownContext.Consumer>
        )
      case DropdownToggleType.iconButton:
        return (
          <DropdownContext.Consumer>
            {(value: DropdownContextType | any) => (
              <div className={className ? className : ''}>
                <ButtonIcon
                  iconPath={iconPath}
                  color={iconColor ? iconColor : COLORS.gray600}
                  size={sizeIcon}
                  title={iconTitle ? iconTitle : ''}
                  hoverIconColor={hoverIconColor}
                  isHoverArea={isHoverArea}
                  id={value.id}
                  disabled={value.disabled}
                />
              </div>
            )}
          </DropdownContext.Consumer>
        )
    }
  }
}

export {DropdownToggle}
